<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';
import { ElMessage } from 'element-plus'; // 引入 Element Plus 的弹窗组件
import { authService } from '@/service/AuthService'; // 引入 authService

const router = useRouter();

// 表单数据
const form = ref({
  username: '', // 用户名
  password: '', // 密码
});

const errorMsg = ref(''); // 错误信息
const showEnterButton = ref(false); // 控制是否显示“进入主页”按钮

// 登录函数
function login() {
  // 发送 POST 请求到后端，使用 URL 参数传递数据
  axios.post('/UserController/getUserByIdByPass', null, {
    params: {
      userId: form.value.username, // 用户名
      password: form.value.password, // 密码
    },
    withCredentials: true, // 允许携带凭证
    headers: {
      'Content-Type': 'application/json', // 设置请求头
    },
  })
      .then(response => {
        if (response.data && response.data.code === 200) {
          // 登录成功，弹出成功提示
          ElMessage.success('登录成功！');
          // 将用户信息存储到 sessionStorage
          sessionStorage.setItem('user', JSON.stringify(response.data.data));
          // 更新登录状态
          authService.isLoggedIn = true;
          // 显示“进入主页”按钮
          showEnterButton.value = true;
        } else {
          // 登录失败，弹出错误提示
          ElMessage.error(response.data?.message || '登录失败，请稍后重试');
        }
      })
      .catch(error => {
        if (error.response) {
          // 服务器返回了错误响应
          ElMessage.error(error.response.data?.message || '登录失败，请检查用户名和密码');
        } else if (error.request) {
          // 请求已发出，但没有收到响应
          ElMessage.error('网络错误，请检查连接');
        } else {
          // 其他错误
          ElMessage.error('登录失败，请稍后重试');
        }
        console.error(error);
      });
}

// 跳转到 Index 页面
function goToIndex() {
  router.push('/Index'); // 确保路径与路由配置一致
}
</script>

<template>
  <div class="h-full bg-sky-9 flex items-center justify-center">
    <div class="w-25em bg-white rounded p-8 shadow-2xl">
      <div class="text-center text-2xl font-bold">Login</div>
      <div class="pt-4">
        <!-- 登录表单 -->
        <form v-if="!showEnterButton" @submit.prevent="login">
          <!-- 用户名 -->
          <div class="mb-4">
            <label class="block text-gray-700 text-sm font-bold mb-2" for="username">
              用户名
            </label>
            <input v-model="form.username" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="username" type="text" placeholder="用户名">
          </div>

          <!-- 密码 -->
          <div class="mb-6">
            <label class="block text-gray-700 text-sm font-bold mb-2" for="password">
              密码
            </label>
            <input v-model="form.password" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" id="password" type="password" placeholder="密码">
          </div>

          <!-- 错误信息 -->
          <div v-if="errorMsg" class="text-red-500 mb-4">{{ errorMsg }}</div>

          <!-- 登录和注册按钮 -->
          <div class="flex items-center justify-between">
            <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="submit">
              登录
            </button>
            <button @click="router.push('/Register')" class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
              注册
            </button>
          </div>
        </form>

        <!-- 登录成功后显示的“进入主页”按钮 -->
        <div v-if="showEnterButton" class="text-center">
          <p class="text-green-500 mb-4">登录成功！</p>
          <button @click="goToIndex" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
            进入主页
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 可以添加一些样式 */
</style>